<script setup>
import { ref } from 'vue'

const flag = ref(true)
</script>

<template>
  <section class="w-sm">
    <h3 class="mb-2 text-center">事件绑定指令</h3>

    <div class="flex justify-center">
      <button class="btn green" @click="flag = !flag">取反</button>
    </div>

    <div :class="['mx-auto mt-2 size-24 bg-red-200', flag ? 'rounded-full' : '']">
      <p class="text-center leading-24">{{ flag }}</p>
    </div>
  </section>
</template>
